<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useImageStore } from '../stores/image';
import { NImage, NPagination, NSpace, NCard, NTag, NEllipsis } from 'naive-ui'


const imageStore = useImageStore()


const images = ref<Image.Image[]>([])
const badImageIdList = ref<string[]>([])

const pageSize = ref(10)
const curPage = ref(1)
const pageCount = ref(1)

onMounted(() => {
    getImages()
})

function getImages() {
    const start = pageSize.value * (curPage.value - 1)
    const end = pageSize.value * curPage.value
    images.value = imageStore.getList(start, end)
    pageCount.value = imageStore.data.length
}

function reportBadImage(id: string) {
    badImageIdList.value.push(id)
}

watch(imageStore.data, () => {
    getImages()
})

</script>

<template>
    <n-space vertical>

        <div style="width:2000px">
            <n-space>
                <n-card v-for="item of images" :style="{ width: '400px', height: '600px' }">
                    <template #cover>
                        <div v-if="badImageIdList.includes(item.id)" style="width: 400px; height: 400px;font-size: xxx-large;text-align: center;background-color: gray;">
                            load failed
                        </div>
                        <div v-else>
                            <n-image v-if="item.url" :src="item.url" :style="{ width: '400px', height: '400px' }" @error="reportBadImage(item.id)" />
                            <n-image v-else :src="'data:image/png;base64,' +item.b64_json" :style="{ width: '400px', height: '400px' }" @error="reportBadImage(item.id)" />

                        </div>
                    </template>
                    <div style="height: 40px;">
                        <n-ellipsis :line-clamp="2">{{ item.prompt }}</n-ellipsis>
                    </div>
                    <template #footer>
                        <n-space>
                            <n-tag type="primary">{{ item.model }}</n-tag>
                            <n-tag type="success">{{ item.size }}</n-tag>
                            <n-tag type="info" v-if="item.model == 'dall-e-3'">{{ item.style }}</n-tag>
                            <n-tag type="info" v-if="item.model == 'dall-e-3'">{{ item.quality }}</n-tag>
                        </n-space>
                    </template>
                    <template #action>
                        <n-space>
                            <div style="height: 40px;">
                                <n-ellipsis :line-clamp="2" v-if="item.revised_prompt">Revised: {{ item.revised_prompt }}</n-ellipsis>
                            </div>
                            <div>{{ new Date(item.created_at).toLocaleString() }}</div>
                        </n-space>

                    </template>

                </n-card>
            </n-space>
        </div>


        <n-space justify="center">
            <n-pagination v-model:page="curPage" v-model:page-size="pageSize" :page-count="pageCount"
                @update-page="getImages" @update-page-size="getImages" :page-sizes="[10, 20, 30]" show-size-picker />
        </n-space>
    </n-space>
</template>